<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :title="title"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="1150px"
  >
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane :label="$t('baseInfo')" name="baseInfo">
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :inline="true"
          :disabled="isDisabled"
          label-width="110px"
        >
          <!-- <el-form-item :label="$t('eqpType')" prop="eqpType">
            <el-select
              v-model="form.eqpType"
              :disabled="intimedisable"
              clearable
              filterable
              @change="eqpTypeChange"
            >
              <el-option
                v-for="item in eqpTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item :label="$t('eqpId')" prop="eqpName">
            <el-input
              v-model.trim="form.eqpName"
              :disabled="eqpnamedisable"
              onkeyup="this.value = this.value.replace(/[\u4e00-\u9fa5]/ig,'')"
              style="width: 200px"
            />
          </el-form-item>
          <!-- <el-form-item :label="$t('eqpModel')" prop="eqpModel">
            <el-select
              v-model="form.eqpModel"
              clearable
              filterable
              @change="eqpModelChange"
            >
              <el-option
                v-for="item in fromeqpmodellist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item :label="$t('eqpBrand')" prop="vendor">
            <el-input
              v-model.trim="form.vendor"
              :disabled="true"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('eqpfacility')" prop="facility">
            <el-input
              v-model.trim="form.facility"
              :disabled="true"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item
            v-show="form.eqpType == 'TESTER'"
            :label="$t('eqpheadids')"
            prop="headId"
          >
            <el-input
              v-model.trim="form.headId"
              :placeholder="$t('separates')"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('eqpemGroup')" prop="emGroup">
            <el-select v-model="form.emGroup" clearable filterable>
              <el-option
                v-for="item in emGroupList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqpserialNo')" prop="serialNo">
            <el-input v-model.trim="form.serialNo" style="width: 200px" />
          </el-form-item>
          <el-form-item :label="$t('eqpassetNo')" prop="assetNo">
            <el-input v-model.trim="form.assetNo" style="width: 200px" />
          </el-form-item>
          <!-- :disabled="intimedisable" -->
          <el-form-item :label="$t('eqpassetAllocate')" prop="assetAllocate">
            <el-select v-model.trim="form.assetAllocate" clearable filterable>
              <el-option
                v-for="item in assetAllocateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('factory')" prop="factory">
            <el-input v-model.trim="form.factory" style="width: 200px" />
          </el-form-item>
          <el-form-item
            :label="$t('eqpancillaryAssetNo')"
            prop="ancillaryAssetNo"
          >
            <el-input v-model.trim="form.ancillaryAssetNo" style="width: 200px" />
          </el-form-item>
          <!-- :disabled="buyofftimedisable" -->
          <el-form-item :label="$t('eqpbuyoffTime')" prop="buyoffTime">
            <el-date-picker
              v-model="form.buyoffTime"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('eqpinTime')" prop="inTime">
            <el-date-picker
              v-model="form.inTime"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 200px"
            />
          </el-form-item>

          <el-form-item :label="$t('eqpbuyoffBy')" prop="buyoffBy">
            <el-input v-model="form.buyoffBy" style="width: 200px" />
          </el-form-item>
          <!-- :disabled="warrantydatedisable" -->
          <el-form-item :label="$t('eqpwarrantyDate')" prop="warrantyDate">
            <el-date-picker
              v-model="form.warrantyDate"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('eqpspecialFeature')" prop="specialFeature">
            <el-input v-model.trim="form.specialFeature" style="width: 200px" />
          </el-form-item>
          <el-form-item :label="$t('eqpsystemType')" prop="systemType">
            <el-select v-model="form.systemType" clearable filterable>
              <el-option
                v-for="item in systemTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('firstOwenrId')" prop="firstOwenrId">
            <el-select v-model="form.owenrId" clearable filterable>
              <el-option
                v-for="item in owenrIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('secondOwenrId')" prop="secondOwenrId">
            <el-select v-model="form.secondOwenrId" clearable filterable>
              <el-option
                v-for="item in owenrIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('selectUserGroup')" prop="userGroupIds">
            <el-select
              v-model="form.userGroupIds"
              clearable
              filterable
              multiple
              @change="changeUser"
            >
              <el-option
                v-for="item in userGroupList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('station')" prop="station">
            <el-select
              v-model="form.station"
              clearable
              filterable
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('useLocation ')" prop="useLocation">
            <el-input
              v-model.trim="form.useLocation"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item :label="$t('description')" prop="description">
            <el-input
              v-model.trim="form.description"
              type="textarea"
              style="width: 400px"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="tabList.includes('TMS')" label="TMS" name="tms">
        <el-form
          ref="tmsruleForm"
          :model="form"
          :inline="true"
          :disabled="isDisabled"
          label-width="110px"
        >
          <el-form-item
            v-show="showsite"
            :label="$t('eqpfullSiteQty')"
            prop="fullSiteQty"
          >
            <el-select v-model="form.fullSiteQty" clearable filterable>
              <el-option
                v-for="item in fullSiteQtylist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqpactiveControl')" prop="activeControl">
            <el-select v-model="form.activeControl" clearable>
              <el-option :value="0" label="NO" />
              <el-option :value="1" label="YES" />
              <el-option :value="99" label="未设置" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqptesterConfig')" prop="testerConfig">
            <el-input v-model.trim="form.testerConfig" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="tabList.includes('PMS')" label="PMS" name="pms">
        <el-form
          ref="pmsruleForm"
          :model="form"
          :inline="true"
          :disabled="isDisabled"
          label-width="110px"
        >
          <el-form-item :label="$t('eqplocation')" prop="location">
            <el-select v-model="form.location" clearable filterable>
              <el-option
                v-for="item in locationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('eqpState')" prop="state">
            <el-select v-model="form.state" clearable filterable>
              <el-option
                v-for="item in eqpStateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div v-if="!isDisabled" slot="footer">
      <el-button
        icon="el-icon-circle-close"
        @click="handleClose"
      >{{ $t("cancel") }}</el-button
      >
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"
      >{{ $t("save") }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import crudJob from '@/api/equipment/eqpbase'
import tmsEqpJob from '@/api/production/equipment'
import selectJob from '@/api/system/attributes'
import { getAllUsers } from '@/api/system/user'
import { getAllUserGroups } from '@/api/system/usergroup'
import { getRemarkList } from '@/api/production/workRecord'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'MyDialog',
  mixins: [mySetting],
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {},
      tabList: [],
      activeName: 'baseInfo',
      // usersValue: [],
      userGroups: [],
      dialogFormVisible: false,
      fromeqpmodellist: [],
      eqpTypeList: [],
      eqpNameList: [],
      eqpModelList: [],
      eqpBrandList: [],
      facilityList: [],
      emGroupList: [],
      assetAllocateList: [],
      systemTypeList: [],
      locationList: [],
      owenrIdList: [],
      fullSiteQtylist: [],
      eqpStateList: [],
      userGroupList: [],
      stationList: [],
      showsite: true,
      showhead: false,
      eqpnamedisable: false,
      intimedisable: false,
      buyofftimedisable: false,
      warrantydatedisable: false,
      rules: {
        eqpType: [
          {
            required: true,
            message: `${this.$t('pleaseSelect')}${this.$t('eqpType')}`,
            trigger: 'change'
          }
        ],
        eqpName: [
          {
            required: true,
            message: this.$t('eqpnamerequired'),
            trigger: 'blur'
          }
        ],
        eqpModel: [
          {
            required: true,
            message: `${this.$t('pleaseSelect')}${this.$t('eqpModel')}`,
            trigger: 'change'
          }
        ],
        // emGroup: [
        //   {
        //     required: true,
        //     message: this.$t('emGrouprequired'),
        //     trigger: 'change'
        //   }
        // ],
        serialNo: [
          {
            required: true,
            message: this.$t('serialNorequired'),
            trigger: 'blur'
          }
        ],
        assetNo: [
          {
            required: true,
            message: this.$t('assetNorequired'),
            trigger: 'blur'
          }
        ],
        // assetAllocate: [
        //   {
        //     required: true,
        //     message: this.$t('assetAllocaterequired'),
        //     trigger: 'change'
        //   }
        // ],
        status: [
          {
            required: true,
            message: this.$t('statusrequired'),
            trigger: 'blur'
          }
        ],
        activeControl: [
          {
            required: true,
            message: this.$t('activeControlrequired'),
            trigger: 'blur'
          }
        ]
        // userGroupIds: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('selectUserGroup')}`,
        //   trigger: 'change' }]
      }
    }
  },
  watch: {
    'form.eqpModel': {
      handler: function() {
        this.$nextTick(() => {
          if (this.form.eqpModel) {
            this.eqpModelChange(this.form.eqpModel)
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    changeUser(value) {
      value.forEach((data, index) => {
        this.userGroups.push(data)
      })
    },
    // 新增数据
    doSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.form.id) {
          // 存在id则是更新
          if (this.tabList.includes('TMS')) {
            tmsEqpJob.edit(this.$clearNull({
              id: this.form.id,
              ...this.form
              // userGroupIds: this.form.usersValue
            })).then((res) => { this.$betterTips(res, this.handleClose) })
          } else {
            crudJob
              .edit(
                this.$clearNull({
                  id: this.form.id,
                  ...this.form
                  // userGroupIds: this.form.userGroupIds
                })
              )
              .then((res) => { this.$betterTips(res, this.handleClose) })
          }
        } else {
          // 不存在id则是新增
          if (this.tabList.includes('TMS')) {
            tmsEqpJob.add(this.$clearNull({ ...this.form, userGroupIds: this.form.userGroupIds })).then((res) => { this.$betterTips(res, this.handleClose) })
          } else {
            crudJob
              .add(
                this.$clearNull({ ...this.form })
              )
              .then((res) => { this.$betterTips(res, this.handleClose) })
          }
        }
      })
    },
    // 打开弹窗
    openDialog(row) {
      if (row && row.id) {
        crudJob.get({ id: row.id }).then((res) => {
          this.eqpnamedisable = true
          this.intimedisable = true
          this.form = res.data
          this.eqpTypeChange(this.form.eqpType, true)
          return res
        }).then(res => {
          crudJob.getEqpUserGroups({ id: res.data.id }).then((res) => {
            this.$set(this.form, 'userGroupIds', res.data)
          })
        })
      } else {
        this.eqpnamedisable = false
        this.intimedisable = false
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })

      this.getAllUserGroupsList()
      this.getTabList()

      crudJob.eqptypelist().then((res) => {
        this.eqpTypeList = res.data
      })

      crudJob.eqpnamelist().then((res) => {
        this.eqpNameList = res.data
      })

      crudJob.eqpmodellist('').then((res) => {
        this.eqpModelList = res.data
      })

      crudJob.eqpbrandlist().then((res) => {
        this.eqpBrandList = res.data
      })

      crudJob.facilitylist().then((res) => {
        this.facilityList = res.data
      })

      selectJob.selectitemlist({ name: 'EQP_EMGroupList' }).then((res) => {
        this.emGroupList = res.data
      })

      selectJob.selectitemlist({ name: 'EQP_AssetalList' }).then((res) => {
        this.assetAllocateList = res.data
      })

      selectJob.selectitemlist({ name: 'EQP_SystemtypeList' }).then((res) => {
        this.systemTypeList = res.data
      })

      selectJob.selectitemlist({ name: 'EQP_LocationList' }).then((res) => {
        this.locationList = res.data
      })
      this.getStations()
      getAllUsers().then((res) => {
        this.owenrIdList = res.data
      })

      selectJob.selectitemlist({ name: 'EQP_fullSiteQtylist' }).then((res) => {
        this.fullSiteQtylist = res.data
      })

      selectJob.selectitemlist({ name: 'EQP_StateList' }).then((res) => {
        this.eqpStateList = res.data
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeDialog')
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleClose() {
      this.$emit('initList')
      this.$emit('closeDialog')
      Object.assign(this.$data, this.$options.data.call(this))
    },
    eqpTypeChange(val, isEdit = false) {
      crudJob.getEqpModelList({ eqptype: val }).then((res) => {
        this.fromeqpmodellist = res.data
      })
      if (val === 'ROTARY' || val === 'HANDLER') {
        this.showsite = true
      } else {
        this.showsite = false
        this.form.fullSiteQty = 0
      }
      if (val === 'TESTER') {
        this.showhead = true
      }
      if (!isEdit) {
        this.$set(this.form, 'eqpModel', '')
        this.$set(this.form, 'vendor', '')
        this.$set(this.form, 'facility', '')
      }
    },
    eqpModelChange() {
      crudJob
        .geteqpmodel({
          eqptype: this.form.eqpType,
          eqpmodel: this.form.eqpModel
        })
        .then((res) => {
          if (res.data != null) {
            this.$set(this.form, 'vendor', res.data.vendor)
            this.$set(this.form, 'facility', res.data.facility)
          }
        })
    },
    async getTabList() {
      const res = await crudJob.getTabList()
      this.tabList = res.data
    },
    async getAllUserGroupsList() {
      const res = await getAllUserGroups()
      this.userGroupList = res.data
    },
    async getStations() {
      const res = await getRemarkList({ name: 'STATION' })
      this.stationList = res.data
    }
  }
}
</script>
